<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>用户管理</title>
    <link
            rel="stylesheet"
            href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
            rel="stylesheet"
            href="./node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />
    <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
            rel="stylesheet"
    />
    <link href="./css/index.css" rel="stylesheet"/>
</head>
<body>

<div class="app-container">
    <aside>
        <!--js动态生成-->
    </aside>
    <div id="content">
        <header>
            <!--js动态生成-->
        </header>
        <main class="container-fluid fade-in">
            <!-- 条件搜索 -->
            <div class="search-card">
                <div class="row g-3">
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="search-from-name" name="name"
                               placeholder="Name">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary" id="search-btn">
                            <i class="bi bi-search"></i>搜索
                        </button>
                        <button class="btn btn-outline-secondary" id="reset-btn">
                            <i class="bi bi-arrow-clockwise"></i>重置
                        </button>
                    </div>
                </div>
            </div>

            <!-- 数据表格 -->
            <div class="table-card">
                <div class="button-wrapper">
                    <button class="btn btn-primary" id="add-btn">
                        <i class="bi bi-plus-circle"></i>Add
                    </button>
                </div>
                <!-- 加载状态 -->
                <div class="loading-spinner" id="loading-spinner">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">正在加载数据...</p>
                </div>

                <!-- 表格容器 -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Operation</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">
                        <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination" id="pagination">
                        <!-- 分页将通过JavaScript动态生成 -->
                    </ul>
                </nav>
            </div>
        </main>
        <footer><!--js动态生成--></footer>
    </div>
</div>


<!-- 添加/编辑用户模态框 -->
<div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Add</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="modal-form">
                    <input type="hidden" id="modal-form-id">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="modal-form-name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="modal-form-name" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3" id="permissions">
                            <label class="form-label">Permissions</label>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="save-btn">Save</button>
            </div>
        </div>
    </div>
</div>

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>

<script src="./js/index.js"></script>
<script src="./utils/request.js"></script>
<script src="./utils/store.js"></script>
<script src="./js/role.js"></script>
</body>
</html>
